<template>
	<view class="login-container">
		<!-- Logo部分 -->
		<view class="logo-section">
			<image src="@/static/public/logo.png" mode="aspectFit" class="logo"></image>
		</view>

		<!-- 登录按钮组 -->
		<view class="login-buttons">
			<view @click="phoneLogin" class="login-btn login-btn-phone">手机号注册</view>
			<view @click="emailLogin" class="login-btn login-btn-email">邮箱注册</view>
		</view>

		<!-- 注册链接 -->
		<view class="register-link">
			<text class="divider-text" @click="goToLogin">去登录</text>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'LoginPage',
		data() {
			return {
				privacyChecked: true
			}
		},
		methods: {
			wechatLogin() {
				// 微信登录逻辑
				if (!this.privacyChecked) {
					uni.$u.toast('请先同意隐私政策')
					return
				}
				// TODO: 实现微信登录
			},
			phoneLogin() {
				// 手机登录逻辑
				if (!this.privacyChecked) {
					uni.$u.toast('请先同意隐私政策')
					return
				}
				// TODO: 跳转到手机登录页面
				uni.navigateTo({
					url: '/pages/public/phoneRegister'
				})
			},
			emailLogin() {
				// 邮箱登录逻辑
				if (!this.privacyChecked) {
					uni.$u.toast('请先同意隐私政策')
					return
				}
				// TODO: 跳转到邮箱登录页面
				uni.navigateTo({
					url: '/pages/public/emailRegister'
				})
			},
			openPrivacyPolicy() {
				// 打开隐私政策
			},
			openSecurityAgreement() {
				// 打开安全协议
			},
			goToLogin() {
				// 跳转到登录页面
				uni.navigateTo({
					url: '/pages/public/login'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.login-container {
		padding: 40rpx;
		display: flex;
		min-height: calc(100vh - 80px);
		flex-direction: column;
		align-items: center;
		background-color: #ffffff;
	}

	.logo-section {
		margin: 120rpx 0;

		.logo {
			width: 240rpx;
			height: 240rpx;
		}
	}

	.login-buttons {
		width: 100%;
		padding: 0 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;

		.login-btn {
			margin-bottom: 30rpx;
			max-width: 554rpx;
			width: 100%;
			height: 95rpx;
			line-height: 95rpx;
			border-radius: 69rpx 69rpx 69rpx 69rpx;
			font-size: 30rpx;
			text-align: center;
			color: #FFFFFF;

			&.login-btn-wechat {
				background: #11CC76;
			}

			&.login-btn-phone {
				background: #2993FF;
			}

			&.login-btn-email {
				background: #FF772C;
			}

		}
	}

	.register-link {
		position: fixed;
		bottom: 100rpx;
		width: 100%;
		left: 0;
		text-align: center;

		.divider-text {
			position: relative;
			color: #666;
			font-size: 32rpx;
			padding: 0 30rpx;

			&::before,
			&::after {
				content: '';
				position: absolute;
				top: 50%;
				width: 200rpx;
				height: 2rpx;
				background-color: #ccc;
			}

			&::before {
				right: 100%;
			}

			&::after {
				left: 100%;
			}
		}
	}
</style>